/* ==================
          背景
 ==================== */

.bg-red {
    background-color: var(--red) !important;
    color: var(--white) !important;
}

.bg-orange {
    background-color: var(--orange) !important;
    color: var(--white) !important;
}

.bg-yellow {
    background-color: var(--yellow) !important;
    color: var(--black) !important;
}

.bg-olive {
    background-color: var(--olive) !important;
    color: var(--white) !important;
}

.bg-green {
    background-color: var(--green) !important;
    color: var(--white) !important;
}

.bg-darkgreen {
    background-color: var(--darkgreen) !important;
    color: var(--white) !important;
}

.bg-cyan {
    background-color: var(--cyan) !important;
    color: var(--white) !important;
}

.bg-blue {
    background-color: var(--blue) !important;
    color: var(--white) !important;
}

.bg-purple {
    background-color: var(--purple) !important;
    color: var(--white) !important;
}

.bg-mauve {
    background-color: var(--mauve) !important;
    color: var(--white) !important;
}

.bg-pink {
    background-color: var(--pink) !important;
    color: var(--white) !important;
}

.bg-brown {
    background-color: var(--brown) !important;
    color: var(--white) !important;
}

.bg-grey {
    background-color: var(--grey) !important;
    color: var(--white) !important;
}

.bg-gray {
    background-color: #f0f0f0 !important;
    color: var(--black) !important;
}

.bg-black {
    background-color: var(--black) !important;
    color: var(--white) !important;
}

.bg-white {
    background-color: var(--white) !important;
    color: var(--darkGray) !important;
}

.bg-shadeTop {
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01)) !important;
    color: var(--white) !important;
}

.bg-shadeBottom {
    background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1)) !important;
    color: var(--white) !important;
}

.bg-red.light {
    color: var(--red) !important;
    background-color: var(--redLight) !important;
}

.bg-orange.light {
    color: var(--orange) !important;
    background-color: var(--orangeLight) !important;
}

.bg-yellow.light {
    color: var(--yellow) !important;
    background-color: var(--yellowLight) !important;
}

.bg-olive.light {
    color: var(--olive) !important;
    background-color: var(--oliveLight) !important;
}

.bg-green.light {
    color: var(--green) !important;
    background-color: var(--greenLight) !important;
}

.bg-cyan.light {
    color: var(--cyan) !important;
    background-color: var(--cyanLight) !important;
}

.bg-blue.light {
    color: var(--blue) !important;
    background-color: var(--blueLight) !important;
}

.bg-purple.light {
    color: var(--purple) !important;
    background-color: var(--purpleLight) !important;
}

.bg-mauve.light {
    color: var(--mauve) !important;
    background-color: var(--mauveLight) !important;
}

.bg-pink.light {
    color: var(--pink) !important;
    background-color: var(--pinkLight) !important;
}

.bg-brown.light {
    color: var(--brown) !important;
    background-color: var(--brownLight) !important;
}

.bg-grey.light {
    color: var(--grey) !important;
    background-color: var(--greyLight) !important;
}

.bg-gradual-red {
    background-image: var(--gradualRed) !important;
    color: var(--white) !important;
}

.bg-gradual-orange {
    background-image: var(--gradualOrange) !important;
    color: var(--white) !important;
}

.bg-gradual-green {
    background-image: var(--gradualGreen) !important;
    color: var(--white) !important;
}

.bg-gradual-purple {
    background-image: var(--gradualPurple) !important;
    color: var(--white) !important;
}

.bg-gradual-pink {
    background-image: var(--gradualPink) !important;
    color: var(--white) !important;
}

.bg-gradual-blue {
    background-image: var(--gradualBlue) !important;
    color: var(--white) !important;
}
